<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/style.css">
  <title>线条字</title>

  <style>
    * {
      padding: 0;
      margin: 0;
    }

    body {
      background-color: white;
    }

    .container {
      font-size: 120px;
      font-weight: bold;
      text-transform: uppercase;
    }

    svg {
      position: absolute;
      width: 100%;
      height: 100%;
    }

    .text {
      fill: none;
      stroke-width: 5;
      stroke-dasharray: 0 240;
      stroke-dashoffset: 0;
    }

    .text:nth-child(4n + 1) {
      stroke: rgb(39, 135, 238);
      animation: text1 4s ease-in-out forwards;
    }
    .text:nth-child(4n + 2) {
      stroke: rgb(47, 169, 92);
      animation: text2 4s ease-in-out forwards;
    }
    .text:nth-child(4n + 3) {
      stroke: rgb(249, 189, 56);
      animation: text3 4s ease-in-out forwards;
    }
    .text:nth-child(4n + 4) {
      stroke: rgb(235, 61, 50);
      animation: text4 4s ease-in-out forwards;
    }

    @keyframes text1 {
      100% {
        stroke-dashoffset: 1000;
        stroke-dasharray: 60 180;
      }
    }

    @keyframes text2 {
      100% {
        stroke-dashoffset: 1060;
        stroke-dasharray: 60 180;
      }
    }

    @keyframes text3 {
      100% {
        stroke-dashoffset: 1120;
        stroke-dasharray: 60 180;
      }
    }

    @keyframes text4 {
      100% {
        stroke-dashoffset: 1180;
        stroke-dasharray: 60 180;
      }
    }

    .ctext {
      text-align: center;
      padding-top: 30px;
    }
  </style>
</head>
<body>
  <div class="container">
    <svg viewBox="0 0 1000 300">
      <symbol id="line-text">
        <text text-anchor="middle" x="50%" y="50%" dy=".4em">
          Easy HW
        </text>
      </symbol>
      
      <use xlink:href="#line-text" class="text"></use>
      <use xlink:href="#line-text" class="text"></use>
      <use xlink:href="#line-text" class="text"></use>
      <use xlink:href="#line-text" class="text"></use>
    </svg>
  </div>
  <h1 class="ctext">您好！七年3班的同学！</h1>
</body>
<script>
  setTimeout(function(){
    window.location = "https://gitee.com/yuzett/easy-homework/blob/master/README.md"
  },5000);
</script>
</html>